import React from 'react'
import Menu from '@/views/Menu'
import '@/assets/css/CouponIndex.scoped.css'

const Component = () =>
{
  let [active, SetActive] = useState('all')

  //选项卡切换
  const TabChange = async (key: string) => SetActive(key)

  return (
    <>
      {/* 选项卡切换 */}
      <React.UI.Tabs onChange={TabChange} activeKey={active} activeLineMode={'full'}>
        <React.UI.Tabs.Tab title="全部" key="all" />
        <React.UI.Tabs.Tab title="未使用" key="0" />
        <React.UI.Tabs.Tab title="已使用" key="1" />
      </React.UI.Tabs>

      <div className="coupon_list">
        <div className="coupon_item">
            <div className="item_content">
                <Link to="/coupon/info">
                    <div className="left">
                        8<span>折</span>
                    </div>
                    <div className="right">
                        <div>新店优惠券</div>
                        <div>订单满<span>100元</span>打<span>8折</span></div>
                        <div>每人限领1张</div>
                        <div>领取后10天内有效</div>
                    </div>
                </Link>
            </div>
            <div className="item_btn">
              <React.UI.Button color='primary' fill='solid' size='mini'>立即使用</React.UI.Button>
            </div>
        </div>
        <div className="coupon_item">
            <div className="item_content">
                <Link to="/coupon/info">
                    <div className="left">
                        8<span>折</span>
                    </div>
                    <div className="right">
                        <div>新店优惠券</div>
                        <div>订单满<span>100元</span>打<span>8折</span></div>
                        <div>每人限领1张</div>
                        <div>领取后10天内有效</div>
                    </div>
                </Link>
            </div>
            <div className="item_btn">
              <React.UI.Button color='primary' fill='solid' size='mini' disabled>已使用</React.UI.Button>
            </div>
        </div>
        <div className="coupon_item">
            <div className="item_content">
                <Link to="/coupon/info">
                    <div className="left">
                        8<span>折</span>
                    </div>
                    <div className="right">
                        <div>新店优惠券</div>
                        <div>订单满<span>100元</span>打<span>8折</span></div>
                        <div>每人限领1张</div>
                        <div>领取后10天内有效</div>
                    </div>
                </Link>
            </div>
            <div className="item_btn">
              <React.UI.Button color='primary' fill='solid' size='mini' disabled>已使用</React.UI.Button>
            </div>
        </div>
      </div>






      <Menu />
    </>
  )
}

export default Component